<template>
  <div class="home">
    <div class="top">
      <div class="carousel"><Carousel/></div>
      <div class="ranking">
        <Ranking/>
      </div>
    </div>
    <div class="bottom">
      <Card/>
    </div>
  </div>
</template>

<script>
  import Carousel from "../components/Carousel";
  import Ranking from "../components/Ranking";
  import Card from "../components/Card";


export default {
  name: 'Home',
  data() {
    return {

    }
  },
  methods: {

  },
  components: {
    Carousel,
    Ranking,
    Card
  }
}
</script>

<style>
  .home{
    display: flex;
    flex-direction: column;
  }
  .top{
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 1px;
    display: flex;
    flex-direction: row;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .carousel {
    width: 70%;
  }
  .ranking {
    width: 30%;
  }
  .bottom {
    width: 90%;
    margin: 30px auto 30px;
  }
</style>
